<div id="paperAnswer">
    <h2>问卷作答详情</h2>
    <el-card header='问卷答案详情列表' shadow="never">
        <el-table :data="answerList" style="width:100%;">
            <el-table-column prop="title" label="问卷标题">
            </el-table-column>
            <el-table-column prop="content" label="问卷内容">
                <template slot-scope="scope">
                    <div v-for="(item,index) in scope.row.content" :key="'index'+index">
                        <span>{{item.text}}</span>
                        <el-tag size="mini">
                            {{trAnswer(item.answer,scope.row.item)}}
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="统计">
                <template slot-scope="scope">
                    <ve-histogram height="200px" width="200px" :data="scope.row.chartData" :settings="chartSettings">
                    </ve-histogram>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</div>
<script>
   var vmb = new Vue({
        el: '#paperAnswer',
        data: {
            chartData: {
                columns: ['level', 'pre'],
                rows: [
                    { 'level': '优秀', 'pre': 10 },
                    { 'level': '良好', 'pre': 10 },
                    { 'level': '中等', 'pre': 30 },
                    { 'level': '很差', 'pre': 50 },
                ]
            },
            chartSettings: {},
            answerList: [],
        },
        methods: {
            // trAnswer 将评价的id装换成text文字评价
            trAnswer: function (id, item) {
                mitem = {}
                for (var j = 0; j < item.length; j++) {
                    mitem[item[j].id] = item[j].text
                }
                return mitem[id]
            },
            // fcontent: function (row, column) {
            //     // 这里的函数被调用了n次，且输入什么数据就是什么
            //     var str = '',
            //         content = JSON.parse(row.content),
            //         item = JSON.parse(row.item)
            //     mitem = {}
            //     for (var j = 0; j < item.length; j++) {
            //         // 属性名 属性值的键值对   对item进行从新定义    //对象可以用中括号访问
            //         mitem[item[j].id] = item[j].text
            //     }
            //     for (var i = 0; i < content.length; i++) {
            //         str += content[i].text + ':' + mitem[content[i].answer] + ';'
            //     }
            //     return str
            // }
        },
        created: function () {
            var _this = this
            $.get('/papers/answer', function (result) {
                // ..中的content是json字符串，JSON.stringify(result)先将result转换成字符串 ,再用JSON.parse全部转换成对象
                // JSON.parse可传第二个参数，递归遍历
                var data = JSON.stringify(result.data)
                result.data = JSON.parse(data, function (key, val) {
                    if (key == 'content' || key == 'item') {
                        return JSON.parse(val)
                    } else {
                        return val
                    }
                })

                console.log(result.data)

                // 对图表中数据进行再加工
                for (var j = 0; j < result.data.length; j++) {
                    var chartData = {
                        columns: ['level', 'pre'],
                        rows: []
                    }
                    var tmp = {}
                    for (var k = 0; k < result.data[j].content.length; k++) {
                        var answer = result.data[j].content[k].answer
                        //这里得到所选择的所有选择
                        answer = _this.trAnswer(answer, result.data[j].item)
                        if (tmp[answer]) {
                            tmp[answer]++
                        } else {
                            tmp[answer] = 1
                        }
                        //得到  这道题目选择优秀的有几次，，即问卷调查结果
                        console.log(tmp)
                    }
                    // 将结果导入chartData的rows中
                    for(var l in tmp){
                        chartData.rows.push({
                            level:l,
                            pre:tmp[l]
                        })
                    }
                    result.data[j].chartData = chartData
                }
                _this.answerList = result.data
                // 数据格式不对，element有格式化属性 formatter,但formatter不支持html标签
            })
        },
    })
</script>
<style>
</style>